<template>
  <div class="q-pa-md">
    <div class="q-gutter-y-md column" style="width: 300px; max-width: 100%">
      <t-toolbar class="bg-primary text-white rounded-borders">
        <t-btn round dense flat icon="menu" class="q-mr-xs" />
        <t-avatar class="gt-xs">
          <img src="https://cdn.quasar.dev/logo-v2/svg/logo-mono-white.svg" />
        </t-avatar>

        <t-space />

        <t-input
          dark
          dense
          standout
          v-model="text"
          input-class="text-right"
          class="q-ml-md"
        >
          <template v-slot:append>
            <t-icon v-if="text === ''" name="search" />
            <t-icon
              v-else
              name="clear"
              class="cursor-pointer"
              @click="text = ''"
            />
          </template>
        </t-input>
      </t-toolbar>
    </div>
  </div>
</template>

<script>
  import { ref } from 'vue';

  export default {
    setup() {
      return {
        text: ref(''),
      };
    },
  };
</script>
